<template>
  <div class="item">
    <RecordsBlock :records="formattedData" />
  </div>
</template>

<script>
import RecordsBlock from './RecordsBlock.vue'

export default {
  name: 'KilometerRegisterItem',
  components: {
    RecordsBlock
  },
  props: {
    record: {
      type: Object,
      required: true
    }
  },
  computed: {
    formattedData() {
      const { record } = this
      console.log('record --------->', record)

      return [
        {
          name: '报销原因',
          value: record.reason || ''
        },
        {
          name: '开始公里数',
          value: record.start_kilometer + 'KM'
        },
        {
          name: '结束公里数',
          value: record.end_kilometer + 'KM'
        },
        {
          name: '本次总里程',
          value: record.end_kilometer - record.start_kilometer + 'KM'
        }
      ]
    }
  },
  created() {
    console.log('this.record --------->', this.record)
  }
}
</script>

<style lang="scss" scoped>
.item {
  .info-item {
    margin-bottom: 8px;
    line-height: 1.5;

    .label {
      color: #606266;
    }

    .value {
      color: #303133;
    }
  }
}
</style>
